<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{% block title %}Login{% endblock %}</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/icons/favicon.ico') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ url_for('static', filename='fonts/font-awesome-4.7.0/css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/animate/animate.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ url_for('static', filename='vendor/css-hamburgers/hamburgers.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/select2/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/util.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}">
</head>

<body>
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-pic js-tilt" data-tilt>
                    <img src="{{ url_for('static', filename='images/img-01.png') }}" alt="IMG">
                </div>

                <form class="login100-form validate-form" method="POST">
                    <span class="login100-form-title">
                        用户 - 登录
                    </span>

                    <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <input class="input100" type="text" name="email" placeholder="Email">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input" data-validate="Password is required">
                        <input class="input100" type="password" name="pass" placeholder="Password">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-lock" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn">
                            登录
                        </button>
                    </div>

                    <div class="text-center p-t-12">
                        <span class="txt1">
                            忘记密码
                        </span>
                        <a class="txt2" href="#">
                            用户名 / 密码
                        </a>
                    </div>

                    <div class="text-center p-t-136">
                        <a class="txt2" href="#">
                            创建你的账号
                            <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="{{ url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/bootstrap/js/popper.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/select2/select2.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/tilt/tilt.jquery.min.js') }}"></script>
    <script>
        $('.js-tilt').tilt({
            scale: 1.1
        })
    </script>
    <script>
        // 获取表单元素
        const emailInput = document.querySelector('input[name="email"]');
        const passwordInput = document.querySelector('input[name="pass"]');
        const loginButton = document.querySelector('.login100-form-btn');
        // 当点击登录按钮时触发的函数
        loginButton.addEventListener('click', async () => {
            // 阻止表单默认提交行为
            event.preventDefault();
            // 创建要发送的数据对象
            const auth_data = 'Basic ' + btoa(emailInput.value + ":" + passwordInput.value);
            //alert(auth_data)
            // 发送 POST 请求到后端 API
            try {
                const response = await fetch('http://127.0.0.1:22222/auth/login', {
                    method: 'POST',
                    headers: {
                        //'Content-Type': 'application/json', // 指定请求的数据格式为 JSON
                        'Authorization': auth_data
                    },
                });
                //alert(response.status)
                if (response.status === 200) {
                    // 登录成功，获取返回的 JSON 数据和用户信息
                    const data = await response.json();
                    alert('登录成功');
                    // 将 token 存储为 Cookie
                    document.cookie = `token=${data.token}; path=/`; // 设置 Cookie，其中 data.token 是您从服务器端获得的 token
                    // 在登录成功后重定向到目标页面
                    window.location.href = 'http://127.0.0.1:22222/index'; // 修改为您的目标页面 URL
                } else {
                    // 登录失败，您可以在此处处理登录失败的情况
                    console.error('登录失败');
                    alert('登录失败');
                }
            } catch (error) {
                // 处理请求错误
                console.error('请求错误', error);
                alert.error('请求错误', error);
            }
        });
    </script>

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>

</html>
</title>
</head>

<body>

</body>

</html>